<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>京东左侧导航栏</title>
    <link rel="stylesheet" href="../3.layout/css/reset.css">
    <style>
        body{
            background-color: rgb(244, 244, 244);
        }
        .dh_list{
            width: 195px;
            height: 450px;
            padding: 10px 0px;
            background-color: rgb(254, 254, 254);
        }
        a{
            text-decoration:none;
            color:black;
            font-size: 14px;
        }
        a:hover{
            color: rgb(200, 22, 35);
        
        }
        .dh_list li:hover {
            background-color: rgb(217, 217, 217);
        }
        li{
            height: 25px;
            /* width: 177px; */
            padding-left: 18px;
            line-height: 25px;
        }
        .line{
            padding: 0 2px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <ul class="dh_list">
        <li>
            <div>
                <a href="javascript:;" >家用电器</a>
            </div>
        </li>
        <li>
            <div>
                <a href="javascript:;" >手机</a><span class="line">/</span><a href="javascript:;" >运营商</a><span class="line">/</span><a href="javascript:;" >数码</a>
            </div>
            
        </li>
        <li>
            <div>
                <a href="javascript:;" >电脑</a><span class="line">/</span><a href="javascript:;" >办公</a>
            </div>
        </li>
        <li>
            <div>
                <a href="javascript:;" >家居</a><span class="line">/</span><a href="javascript:;" >家具</a><span class="line">/</span><a href="javascript:;" >家装</a><span class="line">/</span><a href="javascript:;" >厨具</a>
            </div>
        </li>
        <li>
            <div>
                <a href="javascript:;" >男装</a><span class="line">/</span><a href="javascript:;" >女装</a><span class="line">/</span><a href="javascript:;" >童装</a><span class="line">/</span><a href="javascript:;" >内衣</a>
            </div>
        </li>
        <li>
            <div>
                <a href="javascript:;" >美妆</a><span class="line">/</span><a href="javascript:;" >个护清洁</a><span class="line">/</span><a href="javascript:;" >宠物</a>
            </div>
        </li>
        <li>
            <div>
                <a href="javascript:;" >女鞋</a><span class="line">/</span><a href="javascript:;" >箱包</a><span class="line">/</span><a href="javascript:;" >钟表</a><span class="line">/</span><a href="javascript:;" >珠宝</a>
            </div>
            
        </li>
        <li>
            <div>
                <a href="javascript:;" >男鞋</a><span class="line">/</span><a href="javascript:;" >运动</a><span class="line">/</span><a href="javascript:;" >户外</a>
            </div>
            
        </li>
        <li>
            <div>
                <a href="javascript:;" >房产</a><span class="line">/</span><a href="javascript:;" >汽车</a><span class="line">/</span><a href="javascript:;" >汽车用品</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >母婴</a><span class="line">/</span><a href="javascript:;" >玩具乐器</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >食品</a><span class="line">/</span><a href="javascript:;" >酒类</a><span class="line">/</span><a href="javascript:;" >生鲜</a><span class="line">/</span><a href="javascript:;" >特产</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >艺术</a><span class="line">/</span><a href="javascript:;" >礼品鲜花</a><span class="line">/</span><a href="javascript:;" >农资绿植</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >医疗保健</a><span class="line">/</span><a href="javascript:;" >计生情趣</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >图书</a><span class="line">/</span><a href="javascript:;" >文娱</a><span class="line">/</span><a href="javascript:;" >教育</a><span class="line">/</span><a href="javascript:;" >电子书</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >机票</a><span class="line">/</span><a href="javascript:;" >酒店</a><span class="line">/</span><a href="javascript:;" >旅游</a><span class="line">/</span><a href="javascript:;" >生活</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >理财</a><span class="line">/</span><a href="javascript:;" >众筹</a><span class="line">/</span><a href="javascript:;" >白条</a><span class="line">/</span><a href="javascript:;" >保险</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >安装</a><span class="line">/</span><a href="javascript:;" >维修</a><span class="line">/</span><a href="javascript:;" >清洗</a><span class="line">/</span><a href="javascript:;" >二手</a>
            </div>            
        </li>
        <li>
            <div>
                <a href="javascript:;" >工业品</a>
            </div>            
        </li>
    </ul>
</body>
</html>